
<template>
  <div>
    <BasePanel title="合同信息" :one="true">
      <Table
          :columns="qualColumns"
          :row-key="record => record.recordId"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
          bordered
      >
        <template #indexSlot="{ index }">{{(pagination.current-1)*10+index+1}}</template>

        <template #detail="{ record }"><span class="blue pointer" @click="openDetail(record)">查看</span></template>
      </Table>
    </BasePanel>
    <Modal v-model:visible="visible" title="详细内容" :width="800" :footer="null" :centered="true">
      <Descriptions :column="2">
        <DescriptionsItem label="项目名称">{{ recordDetail.conPrjName }}</DescriptionsItem>
        <DescriptionsItem label="合同签订日期">{{ parseTime( recordDetail?.contractDate ) }}</DescriptionsItem>
        <DescriptionsItem label="合同金额(万元)">{{ recordDetail?.contractMoney }}</DescriptionsItem>
        <DescriptionsItem label="合同编号">{{ recordDetail?.contractNum }}</DescriptionsItem>
        <DescriptionsItem label="合同类别">{{ recordDetail?.contractType }}</DescriptionsItem>
        <DescriptionsItem label="承包单位名称">{{ recordDetail?.contractorCorpName }}</DescriptionsItem>
        <DescriptionsItem label="数据等级">{{ recordDetail?.dataLevel }}</DescriptionsItem>
        <DescriptionsItem label="发包单位统一社会信用代码">{{ recordDetail?.propietorCorpCode }}</DescriptionsItem>
        <DescriptionsItem label="发包单位名称">{{ recordDetail.propietorCorpName }}</DescriptionsItem>
      </Descriptions>

    </Modal>
  </div>

</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, toRefs, ref } from 'vue';
import {Form, Input, Button, Select, Table, Row, Col,Modal, Descriptions} from "ant-design-vue";
import { BasePanel } from '/@/components/panelComponent/index';
import { getprjRecordApi } from '/@/api/pro';
import { parseTime } from '/@/utils';
interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}

const qualColumns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '合同编号', dataIndex: 'contractNum' },
  { title: '合同类别', dataIndex: 'contractType' },
  { title: '合同金额(万元)', dataIndex: 'contractMoney' },
  { title: '合同签订日期', dataIndex: 'contractDate' ,customRender: ({ record })=> parseTime(record.contractDate) },
  { title: '发包单位', dataIndex: 'propietorCorpName' },
  { title: '承包单位', dataIndex: 'contractorCorpName' },
  { title: '详情', dataIndex: 'recordId', slots: ({ customRender: 'detail' }) }

]

export default defineComponent({
  components: { BasePanel, Table ,Form, Row, Col,FormItem: Form.Item, Input, Modal , Descriptions,DescriptionsItem:Descriptions.Item,  Button, Select, Option: Select.Option},
  setup() {
    const applyId = inject('applyId') as string;
    const dataSource = ref<unknown[]>([]);
    const loading = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const recordDetail = ref<any>()
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })

    const queryParam = reactive({
      applyId:applyId,
      current:1,
      size:10
    })

    const getTableList = () => {
      loading.value = true;
      getprjRecordApi(queryParam).then(({ data, success }) => {
        if(success) {
          let { records, size, total } = data;
          dataSource.value = records;
          paginationRef.value.total = total;
          paginationRef.value.pageSize = size;
          loading.value = false;
        }
      })
    }

    const openDetail = data =>{
      recordDetail.value = data
      visible.value = true;
    }

    const init = () => {
     getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }
    onMounted(init)
    return {
      queryParam, qualColumns, pagination:paginationRef,dataSource,loading,
      ...toRefs(queryParam), getTableList ,handleTableChange,
      openDetail,visible,recordDetail,parseTime
    }
  },
})
</script>

<style lang="less" scoped>
.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.filter{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 600px;
}
</style>
